<template>
	<div class="risk-check">
		<van-search
		class="info_search"
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
	  <!-- <van-button type="info" size="small" @click="submit()" >完成</van-button> -->
    <div @click="submit()">完成</div>
  </template>
</van-search>
		<!-- <div class="add" @click="submit()">完成</div> -->
		<!-- <van-search class="info_search" v-model="value" placeholder="搜索" >
			 <template #action>
    <div @click="onSearch">搜索</div>
  </template>
		</van-search> -->
		<template v-for="(item, index) in result">
			<div style="margin: 2px" :key="index">
				<van-tag closeable size="medium" type="primary" @close="close(index)">
					{{ item.Title }}
				</van-tag>
			</div>
		</template>
		<van-checkbox-group v-model="result" @change="hanndleChangeOne()">
			<van-tabs v-model="active" swipeable :ellipsis="false">
				<van-tab title="公司检查表">
					<van-list
						style="margin: 10px"
						:finished="deptFinished"
						v-model="deptLoading"
						finished-text="没有更多了"
						@load="deptOnLoad"
					>
						<van-cell-group>
							<van-cell
								v-for="item in deptList"
								:key="item.ID"
								:title="item.Title"
								:label="item.Remarks || '暂无描述'"
							>
								<template #right-icon>
									<van-checkbox :name="item" ref="checkboxes" />
								</template>
							</van-cell>
						</van-cell-group>
					</van-list>
				</van-tab>
				<van-tab title="公司检查表">
					<van-list
						style="margin: 10px"
						:finished="myFinished"
						v-model="myLoading"
						finished-text="没有更多了"
						@load="myOnLoad"
					>
						<van-cell-group>
							<van-cell
								v-for="item in myList"
								:key="item.ID"
								:title="item.Title"
								:label="item.Remarks || '暂无描述'"
							>
								<template #right-icon>
									<van-checkbox :name="item" ref="checkboxes" />
								</template>
							</van-cell>
						</van-cell-group>

						<!-- <div class="dep_item">
            <div class="dep_item_detail" v-for="item in myList" :key="item.ID">
              <div @click="goDetail(item)">
                <div class="dep_name">{{ item.Title || "无" }}</div>
                <div class="dep_sort">
                  <div>{{ item.Remarks || "暂无描述" }}</div>
                </div>
              </div>

            </div>
          </div> -->
					</van-list>
				</van-tab>
				<van-tab title="公共检查表">
					<van-list
						style="margin: 10px"
						:finished="pubFinished"
						v-model="pubLoading"
						finished-text="没有更多了"
						@load="pubOnLoad"
					>
						<van-cell-group>
							<van-cell
								v-for="item in pubList"
								:key="item.ID"
								:title="item.Title"
								:label="item.Remarks || '暂无描述'"
							>
								<template #right-icon>
									<van-checkbox :name="item" ref="checkboxes" />
								</template>
							</van-cell>
						</van-cell-group>

						<!-- <div class="dep_item">
          <div class="dep_item_detail" v-for="item in pubList" :key="item.ID">
            <div @click="goDetail(item)">
              <div class="dep_name">{{ item.Title || "无" }}</div>
              <div class="dep_sort">
                <div>{{ item.Remarks || "暂无描述" }}</div>
              </div>
            </div>
          </div>
   
           </div> -->
						<van-divider />
					</van-list>
				</van-tab>
				<van-tab title="我的检查表">
					<van-list
						style="margin: 10px"
						:finished="finished"
						v-model="loading"
						finished-text="没有更多了"
						@load="onLoad"
					>
						<van-cell-group>
							<van-cell
								v-for="item in list"
								:key="item.ID"
								:title="item.Title"
								:label="item.Remarks || '暂无描述'"
							>
								<template #right-icon>
									<van-checkbox :name="item" ref="checkboxes" />
								</template>
							</van-cell>
						</van-cell-group>

						<!-- <div class="dep_item">
            <div class="dep_item_detail" v-for="item in list" :key="item.ID">
              <div @click="goDetail(item)">
                <div class="dep_name">{{ item.Title || "无" }}</div>
                <div class="dep_sort">
                  <div>{{ item.Remarks || "暂无描述" }}</div>
                </div>
              </div>
            </div>
          </div> -->
					</van-list>
				</van-tab>
			</van-tabs>
		</van-checkbox-group>
		<van-dialog
			v-model="show"
			title="修改检查表名称"
			@confirm="handleConfirm()"
			show-cancel-button
		>
			<van-form>
				<van-field
					clickable
					name="Title"
					v-model="form.Title"
					placeholder="请输入"
				/>
			</van-form>
		</van-dialog>
	</div>
</template>

<script>
import {
	GetPageData,
} from '@/api/dangerTemplate'
export default {
	data() {
		return {
			result: [],
			resultTotal: [],
			resultTotalNames: [],
			baseUrl: process.env.VUE_APP_BASE_API,
			active: 0,
			value: '',
			list: [],
			form: {},
			myList: [],
			pubList: [], // 公共检查表
			deptList: [],
			show: false,
			selectKey: '',
			myFilter: {
				page: 0,
				dataType: 'CompanyList',
			},
			deptFilter: {
				page: 0,
				dataType: 'CompanyCMPLList',
			},
			filter: {
				page: 0,
				dataType: 'UserList',
			},
			pubFilter: {
				page: 0,
				dataType: 'SysList',
			},
			loading: false,
			finished: false,

			myLoading: false,
			myFinished: false,
			deptLoading: false,
			deptFinished: false,
			pubFinished: false,
			pubLoading: false,
		}
	},
	created() {
		this.getList()
		this.getMyList()
		this.getDeptList()
		this.getPubList()
	},
	methods: {
		hanndleChangeOne() {},
		onSearch(){
            console.log('asdasd');
		},

		submit() {
			let TCodes = []
			let TNames = []
			this.result.map((item, index) => {
				TCodes.push(item.TCode)
				TNames.push(item.Title)
			})
			let params = {
				TCodes: TCodes.join(','),
				TNames: TNames.join(','),
			}
				this.$emit('cb', params)

			// this.$router.push({
			// 	name: this.$route.params.path,
			// 	params: params,
			// })
		},

		close(idx) {
			this.result.splice(idx, 1)
		},

		getMyList() {
			this.myLoading = true
			GetPageData(this.myFilter).then((res) => {
				this.myLoading = false
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
				this.myList = res.data.Data
				this.myFilter.page = res.data.PageIndex
			})
		},
		getDeptList() {
			this.deptLoading = true
			GetPageData(this.deptFilter).then((res) => {
				this.deptLoading = false
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
				this.deptList = res.data.Data
				this.deptFilter.page = res.data.PageIndex
			})
		},
		getPubList() {
			this.pubLoading = true
			GetPageData(this.pubFilter).then((res) => {
				this.pubLoading = false
				if (!res.data.HasNextPage) {
					this.pubFinished = true
				}
				this.pubList = res.data.Data
				this.pubFilter.page = res.data.PageIndex
			})
		},
		getList() {
			this.loading = true
			GetPageData(this.filter).then((res) => {
				this.loading = false
				if (!res.data.HasNextPage) {
					this.finished = true
				}
				this.list = res.data.Data
				this.filter.page = res.data.PageIndex
			})
		},

		myOnLoad() {
			this.myLoading = true
			++this.myFilter.page
			GetPageData(this.myFilter).then((res) => {
				this.myLoading = false
				this.myFilter.page = res.data.PageIndex
				this.myList = this.myList.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
			})
		},
		deptOnLoad() {
			this.deptLoading = true
			++this.deptFilter.page
			GetPageData(this.deptFilter).then((res) => {
				this.deptLoading = false
				this.deptFilter.page = res.data.PageIndex
				this.deptList = this.deptList.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.deptFinished = true
				}
			})
		},

		pubOnLoad() {
			this.pubLoading = true
			++this.pubFilter.page
			GetPageData(this.pubFilter).then((res) => {
				this.pubLoading = false
				this.pubFilter.page = res.data.PageIndex
				this.pubList = this.pubList.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.pubFinished = true
				}
			})
		},

		onLoad() {
			this.loading = true
			++this.filter.page
			GetPageData(this.filter).then((res) => {
				this.loading = false
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
	},
}
</script>
<style lang="less" scoped>
.info_search {
	padding: 10px;
	border-radius: 5px !important;
	.van-field__control {
		background-color: #ffffff !important;
	}
}
</style>

<style lang="less" scoped>

.risk-check {
	background-color: #e8f1f8;
	min-height: 100vh;
}
.all_dep {
	background-color: #ffffff;
}
.warn_item {
	margin: 10px;
	/*margin-bottom: 10px;*/
	padding: 10px 0 10px 10px;
	border-radius: 5px;
	position: relative;
}
.warn_header {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 10px;
	.warn_tag {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 26.64rem 0 0 26.64rem;
	}
}
.dep_sort {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	img {
		height: 15px;
		width: 15px;
		margin-right: 5px;
	}
}

.dep_btm {
	display: flex;
	justify-content: flex-end;
	.btm_item {
		display: flex;
		align-items: center;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
}

.dep_item {
	width: 100%;
	padding: 10px;
	background-color: #e8f1f8;
}
.dep_item_detail {
	/* margin: 10px;*/
	padding: 10px;
	border-radius: 5px;
	background-color: #ffffff;
	position: relative;
	margin-bottom: 10px;
	/* border-bottom: 1px solid #e8f1f8;*/
	.dep_name {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.dep_sort {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		font-size: 13px;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
	.dep_btm {
		display: flex;
		justify-content: flex-end;
		font-size: 12px;
		.btm_item {
			display: flex;
			align-items: center;
			img {
				height: 15px;
				width: 15px;
				margin-right: 5px;
			}
		}
	}
}

.tags {
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 26.64rem 0 0 26.64rem;
}
</style>
